<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年07月09日 19:19
 * @Copyright:  2022-2023
!-->
<template>
  <div class="right-main-container">
    <LoginHint v-if="[null, '', undefined, 'undefined'].includes(userId)"/>
    <UserStatistics v-else :userIllustrate="userIllustrate"/>
<!--    <SiteConnectWay />-->
    <TagCloud />
    <RecommendArticle />
    <FriendLink />
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import UserStatistics from '@/components/UserStatistics/index.vue';
import LoginHint from "@/components/LoginHint/index.vue";
import SiteConnectWay from '@/components/SiteConnectWay/index.vue';
import TagCloud from '@/components/TagCloud/index.vue';
import FriendLink from '@/components/FriendLink/index.vue';
import RecommendArticle from '@/components/RecommendArticle/index.vue';
import { getUserIllustrate } from "@/api/blog/baseUser";
import { getUserId } from "@/utils/auth";

@Component({
  components: {
    LoginHint,
    UserStatistics,
    SiteConnectWay,
    TagCloud,
    FriendLink,
    RecommendArticle
  }
})
export default class index extends Vue {

  /** 当前登录用户信息 */
  private userIllustrate:any = {};

  /** 用户id */
  private userId:any = '';

  private mounted() {
    if (this.$route.query.hasOwnProperty('userId')) {
      this.userId = this.$route.query.userId;
    } else {
      this.userId = getUserId();
    }
    if (![null, '', undefined, 'undefined'].includes(this.userId)) {
      this.getUserIllustrate(this.userId);
    }
  }

  /** 获取用户相关信息 */
  private getUserIllustrate(userId: string) {
    getUserIllustrate(userId).then((res: any) => {
      this.userIllustrate = res.data;
    })
  }

}
</script>
<style scoped lang="scss">
.right-main-container {
  width: calc(29% - 10px);
  margin-left: 20px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap:20px;
}
@media only screen and (min-width: 850px) and (max-width: 1300px){
  .right-main-container {
    width: 100% !important;
    margin-left: unset !important;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 850px) {
  .right-main-container {
    width: 100% !important;
    margin-left: unset !important;
    margin-top: 20px;
  }
  .catalog {
    display: none;
  }
}
</style>
